<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">农事日历</text>
			<view class="nav-actions">
				<uni-icons type="plus" size="24" color="#333" @click="showAddPopup" />
				<uni-icons type="list" size="24" color="#333" @click="handleFilter" />
			</view>
		</view>

		<!-- 视图切换 -->
		<view class="view-switch">
			<text :class="['switch-item', {active: currentView === 'month'}]" @click="switchView('month')">月</text>
			<text :class="['switch-item', {active: currentView === 'week'}]" @click="switchView('week')">周</text>
			<text :class="['switch-item', {active: currentView === 'day'}]" @click="switchView('day')">日</text>
		</view>

		<!-- 日历主体 -->
		<view class="calendar-container">
			<view class="calendar-header">
				<text class="header-text">{{ currentMonth }}月</text>
				<view class="header-arrows">
					<uni-icons type="back" size="20" color="#666" @click="prevPeriod" />
					<uni-icons type="forward" size="20" color="#666" @click="nextPeriod" />
				</view>
			</view>

			<!-- 月视图 -->
			<view v-if="currentView === 'month'" class="month-view">
				<view class="weekdays">
					<!-- 修改1：这里改为使用weekdays数组中的day属性 -->
					<text v-for="day in weekdays" :key="day.id" class="weekday">{{ day.day }}</text>
				</view>
				<view class="days-grid">
					<view v-for="(day, index) in monthDays" :key="index" :class="['day-cell', {
            'current-day': day.isCurrentDay,
            'selected-day': day.isSelected,
            'other-month': !day.isCurrentMonth
          }]" @click="selectDay(day)">
						<text class="day-number">{{ day.date.getDate() }}</text>
						<view class="event-markers">
							<view v-for="(event, i) in day.events" :key="i" :class="['marker', `type-${event.type}`]" />
						</view>
						<text v-if="day.events.length > 3" class="event-count">+{{ day.events.length - 3 }}</text>
					</view>
				</view>
			</view>

			<!-- 周视图 -->
			<view v-if="currentView === 'week'" class="week-view">
				<view class="week-header">
					<text class="week-range">{{ weekRange }}</text>
				</view>
				<view class="week-days">
					<view v-for="day in weekDays" :key="day.date"
						:class="['week-day', { 'selected-day': day.isSelected }]" @click="selectDay(day)">
						<!-- 修改2：这里改为使用weekdays数组中的day属性 -->
						<text class="week-day-name">{{ weekdays[day.date.getDay()].day }}</text>
						<text class="week-day-date">{{ day.date.getDate() }}</text>
						<view class="event-markers">
							<view v-for="(event, i) in day.events" :key="i" :class="['marker', `type-${event.type}`]" />
						</view>
					</view>
				</view>
			</view>

			<!-- 日视图 -->
			<view v-if="currentView === 'day'" class="day-view">
				<view class="day-header">
					<text class="day-title">{{ selectedDayTitle }}</text>
				</view>
			</view>
		</view>

		<!-- 事件列表 -->
		<view class="events-container">
			<view class="events-header">
				<text class="events-title">{{ selectedDayTitle }}</text>
				<text class="events-count">{{ selectedDayEvents.length }}项农事</text>
			</view>
			<scroll-view class="events-list" scroll-y>
				<view v-for="(event, index) in selectedDayEvents" :key="index" class="event-item"
					@click="showEventDetail(event)">
					<view class="event-time">
						<uni-icons type="time" size="16" color="#666" />
						<text class="time-text">{{ event.time }}</text>
					</view>
					<view class="event-content">
						<text class="event-title">{{ event.title }}</text>
						<!-- 修改3：这里改为通过fieldId查找对应的农田名称 -->
						<text class="event-field">{{ getFieldName(event.fieldId) }}</text>
					</view>
					<view :class="['event-status', `status-${event.status}`]">
						{{ statusText[event.status] }}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 事件详情弹窗 -->
		<uni-popup ref="eventPopup" type="bottom" :mask-click="false">
			<view class="event-detail">
				<view class="detail-header">
					<text class="detail-title">{{ isEditing ? '编辑农事' : currentEvent.title }}</text>
					<uni-icons type="close" size="20" color="#999" @click="closeEventDetail" />
				</view>
				<view class="detail-content">
					<view v-if="!isEditing">
						<view class="detail-row">
							<uni-icons type="calendar" size="16" color="#666" />
							<text class="detail-text">{{ currentEvent.date }} {{ currentEvent.time }}</text>
						</view>
						<view class="detail-row">
							<uni-icons type="map-pin" size="16" color="#666" />
							<!-- 修改4：这里改为通过fieldId查找对应的农田名称 -->
							<text class="detail-text">{{ getFieldName(currentEvent.fieldId) }}</text>
						</view>
						<view class="detail-row">
							<uni-icons type="info" size="16" color="#666" />
							<text class="detail-text">{{ currentEvent.description }}</text>
						</view>
					</view>
					<view v-else class="edit-form">
						<view class="form-item">
							<text class="form-label">农事名称</text>
							<input class="form-input" v-model="editForm.title" placeholder="请输入农事名称" />
						</view>
						<view class="form-item">
							<text class="form-label">农田区域</text>
							<picker class="form-input" :range="fieldOptions" range-key="name"
								v-model="editForm.fieldIndex">
								<view>{{ fieldOptions[editForm.fieldIndex].name }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">日期</text>
							<picker class="form-input" mode="date" :value="editForm.date" @change="dateChange">
								<view>{{ editForm.date }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">时间</text>
							<picker class="form-input" mode="time" :value="editForm.time" @change="timeChange">
								<view>{{ editForm.time }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">农事类型</text>
							<picker class="form-input" :range="eventTypes" range-key="label"
								v-model="editForm.typeIndex">
								<view>{{ eventTypes[editForm.typeIndex].label }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">状态</text>
							<picker class="form-input" :range="statusOptions" range-key="label"
								v-model="editForm.statusIndex">
								<view>{{ statusOptions[editForm.statusIndex].label }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">详细描述</text>
							<textarea class="form-textarea" v-model="editForm.description"
								placeholder="请输入详细描述"></textarea>
						</view>
					</view>
				</view>
				<view class="detail-actions">
					<template v-if="!isEditing">
						<button v-if="currentEvent.status === 'pending'" class="action-btn complete-btn"
							@click="markEventComplete">
							标记完成
						</button>
						<button class="action-btn edit-btn" @click="startEditing">编辑</button>
						<button class="action-btn delete-btn" @click="deleteEvent">删除</button>
					</template>
					<template v-else>
						<button class="action-btn cancel-btn" @click="cancelEditing">取消</button>
						<button class="action-btn save-btn" @click="saveEvent">保存</button>
					</template>
				</view>
			</view>
		</uni-popup>

		<!-- 添加农事弹窗 -->
		<uni-popup ref="addPopup" type="bottom" :mask-click="false">
			<view class="event-detail">
				<view class="detail-header">
					<text class="detail-title">添加农事</text>
					<uni-icons type="close" size="20" color="#999" @click="closeAddPopup" />
				</view>
				<view class="detail-content">
					<view class="edit-form">
						<view class="form-item">
							<text class="form-label">农事名称</text>
							<input class="form-input" v-model="addForm.title" placeholder="请输入农事名称" />
						</view>
						<view class="form-item">
							<text class="form-label">农田区域</text>
							<picker class="form-input" :range="fieldOptions" range-key="name"
								v-model="addForm.fieldIndex">
								<view>{{ fieldOptions[addForm.fieldIndex].name }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">日期</text>
							<picker class="form-input" mode="date" :value="addForm.date" @change="addDateChange">
								<view>{{ addForm.date }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">时间</text>
							<picker class="form-input" mode="time" :value="addForm.time" @change="addTimeChange">
								<view>{{ addForm.time }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">农事类型</text>
							<picker class="form-input" :range="eventTypes" range-key="label"
								v-model="addForm.typeIndex">
								<view>{{ eventTypes[addForm.typeIndex].label }}</view>
							</picker>
						</view>
						<view class="form-item">
							<text class="form-label">详细描述</text>
							<textarea class="form-textarea" v-model="addForm.description"
								placeholder="请输入详细描述"></textarea>
						</view>
					</view>
				</view>
				<view class="detail-actions">
					<button class="action-btn cancel-btn" @click="closeAddPopup">取消</button>
					<button class="action-btn save-btn" @click="addEvent">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import uniTransition from "@/uni_modules/uni-transition/components/uni-transition/uni-transition.vue"
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"

	// 视图状态
	const currentView = ref('month');
	const currentDate = ref(new Date());
	const selectedDate = ref(new Date());

	// 数据状态
	const events = ref([]);
	const fields = ref([]);
	const statusText = ref({});
	const weekdays = ref([]);
	const eventTypes = ref([]);

	// 当前查看的事件
	const currentEvent = ref(null);
	const eventPopup = ref(null);
	const addPopup = ref(null);

	// 编辑状态
	const isEditing = ref(false);
	const editForm = ref({
		title: '',
		fieldIndex: 0,
		date: '',
		time: '',
		typeIndex: 0,
		statusIndex: 0,
		description: ''
	});

	// 添加表单
	const addForm = ref({
		title: '',
		fieldIndex: 0,
		date: '',
		time: '',
		typeIndex: 0,
		description: ''
	});

	// 状态选项
	const statusOptions = ref([{
			value: 'pending',
			label: '待处理'
		},
		{
			value: 'completed',
			label: '已完成'
		},
		{
			value: 'overdue',
			label: '已过期'
		}
	]);

	// 计算属性
	const currentMonth = computed(() => currentDate.value.getMonth() + 1);

	const selectedDayTitle = computed(() => {
		const date = selectedDate.value;
		return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
	});

	const weekRange = computed(() => {
		const start = new Date(currentDate.value);
		start.setDate(start.getDate() - start.getDay());
		const end = new Date(start);
		end.setDate(end.getDate() + 6);
		return `${start.getMonth() + 1}月${start.getDate()}日-${end.getMonth() + 1}月${end.getDate()}日`;
	});

	// 修改5：添加计算属性获取农田选项
	const fieldOptions = computed(() => {
		return fields.value.map(field => ({
			id: field.id,
			name: field.name
		}));
	});

	// 月视图数据
	const monthDays = computed(() => {
		const year = currentDate.value.getFullYear();
		const month = currentDate.value.getMonth();
		const firstDay = new Date(year, month, 1);
		const lastDay = new Date(year, month + 1, 0);
		const days = [];
		const startDay = firstDay.getDay();
		const daysInMonth = lastDay.getDate();
		const daysInPrevMonth = new Date(year, month, 0).getDate();

		// 上个月的最后几天
		for (let i = startDay - 1; i >= 0; i--) {
			const date = new Date(year, month - 1, daysInPrevMonth - i);
			days.push({
				date,
				isCurrentMonth: false,
				isCurrentDay: false,
				isSelected: isSameDay(date, selectedDate.value),
				events: getEventsForDay(date)
			});
		}

		// 当前月的天数
		const today = new Date();
		for (let i = 1; i <= daysInMonth; i++) {
			const date = new Date(year, month, i);
			days.push({
				date,
				isCurrentMonth: true,
				isCurrentDay: isSameDay(date, today),
				isSelected: isSameDay(date, selectedDate.value),
				events: getEventsForDay(date)
			});
		}

		// 下个月的前几天
		const remainingCells = 42 - days.length;
		for (let i = 1; i <= remainingCells; i++) {
			const date = new Date(year, month + 1, i);
			days.push({
				date,
				isCurrentMonth: false,
				isCurrentDay: false,
				isSelected: isSameDay(date, selectedDate.value),
				events: getEventsForDay(date)
			});
		}
		return days;
	});

	// 周视图数据
	const weekDays = computed(() => {
		const start = new Date(currentDate.value);
		start.setDate(start.getDate() - start.getDay());
		const days = [];
		for (let i = 0; i < 7; i++) {
			const date = new Date(start);
			date.setDate(date.getDate() + i);
			days.push({
				date,
				isSelected: isSameDay(date, selectedDate.value),
				events: getEventsForDay(date)
			});
		}
		return days;
	});

	// 选中日的事件
	const selectedDayEvents = computed(() => {
		return getEventsForDay(selectedDate.value);
	});

	// 方法
	const switchView = (view) => {
		currentView.value = view;
	};

	const prevPeriod = () => {
		const date = new Date(currentDate.value);
		if (currentView.value === 'month') {
			date.setMonth(date.getMonth() - 1);
		} else {
			date.setDate(date.getDate() - 7);
		}
		currentDate.value = date;
	};

	const nextPeriod = () => {
		const date = new Date(currentDate.value);
		if (currentView.value === 'month') {
			date.setMonth(date.getMonth() + 1);
		} else {
			date.setDate(date.getDate() + 7);
		}
		currentDate.value = date;
	};

	const selectDay = (day) => {
		selectedDate.value = new Date(day.date);
		if (currentView.value === 'day') {
			currentDate.value = new Date(day.date);
		}
	};

	const isSameDay = (date1, date2) => {
		return date1.getFullYear() === date2.getFullYear() &&
			date1.getMonth() === date2.getMonth() &&
			date1.getDate() === date2.getDate();
	};

	const getEventsForDay = (date) => {
		const dateStr =
			`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		return events.value.filter(event => event.date === dateStr);
	};

	// 修改6：添加获取农田名称的方法
	const getFieldName = (fieldId) => {
		const field = fields.value.find(f => f.id == fieldId);
		return field ? field.name : '未知农田';
	};

	const showEventDetail = (event) => {
		uni.hideTabBar();
		currentEvent.value = event;
		isEditing.value = false;
		eventPopup.value.open();
	};

	const closeEventDetail = () => {
		uni.showTabBar();
		eventPopup.value.close();
	};

	const showAddPopup = () => {
		// 初始化添加表单，默认选中当天
		const today = new Date();
		const dateStr =
			`${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
		const timeStr =
			`${today.getHours().toString().padStart(2, '0')}:${today.getMinutes().toString().padStart(2, '0')}`;

		addForm.value = {
			title: '',
			fieldIndex: 0,
			date: dateStr,
			time: timeStr,
			typeIndex: 0,
			description: ''
		};

		uni.hideTabBar();
		addPopup.value.open();
	};

	const closeAddPopup = () => {
		uni.showTabBar();
		addPopup.value.close();
	};

	//编辑日历中的农事
	const startEditing = () => {
		editForm.value = {
			title: currentEvent.value.title,
			fieldIndex: fields.value.findIndex(f => f.id == currentEvent.value.fieldId),
			date: currentEvent.value.date,
			time: currentEvent.value.time,
			typeIndex: eventTypes.value.findIndex(et => et.value === currentEvent.value.type),
			statusIndex: statusOptions.value.findIndex(s => s.value === currentEvent.value.status),
			description: currentEvent.value.description
		};
		isEditing.value = true;
	};

	const cancelEditing = () => {
		isEditing.value = false;
	};

	const saveEvent = () => {
		const updatedEvent = {
			...currentEvent.value,
			title: editForm.value.title,
			fieldId: fieldOptions.value[editForm.value.fieldIndex].id,
			date: editForm.value.date,
			time: editForm.value.time,
			type: eventTypes.value[editForm.value.typeIndex].value,
			status: statusOptions.value[editForm.value.statusIndex].value,
			description: editForm.value.description
		};

		uni.request({
			url: 'http://localhost:3000/events/' + currentEvent.value.id,
			method: 'PUT',
			data: updatedEvent,
			success: () => {
				loadEvents();
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
				isEditing.value = false;
				currentEvent.value = updatedEvent;
			}
		});
	};

	const addEvent = () => {
		const newEvent = {
			id: Date.now(), // 临时ID，实际项目中应由后端生成
			title: addForm.value.title,
			fieldId: fieldOptions.value[addForm.value.fieldIndex].id,
			date: addForm.value.date,
			time: addForm.value.time,
			type: eventTypes.value[addForm.value.typeIndex].value,
			status: 'pending', // 新添加的事件默认状态为待处理
			description: addForm.value.description
		};

		uni.request({
			url: 'http://localhost:3000/events',
			method: 'POST',
			data: newEvent,
			success: () => {
				loadEvents();
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
				closeAddPopup();
			}
		});
	};

	const dateChange = (e) => {
		editForm.value.date = e.detail.value;
	};

	const timeChange = (e) => {
		editForm.value.time = e.detail.value;
	};

	const addDateChange = (e) => {
		addForm.value.date = e.detail.value;
	};

	const addTimeChange = (e) => {
		addForm.value.time = e.detail.value;
	};

	const markEventComplete = () => {
		uni.request({
			url: 'http://localhost:3000/events/' + currentEvent.value.id,
			method: 'PUT',
			data: {
				...currentEvent.value,
				status: 'completed'
			},
			success: () => {
				loadEvents();
				uni.showToast({
					title: '已标记完成',
					icon: 'success'
				});
				closeEventDetail();
			}
		});
	};

	const deleteEvent = () => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这条农事记录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.request({
						url: 'http://localhost:3000/events/' + currentEvent.value.id,
						method: 'DELETE',
						success: () => {
							loadEvents();
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
							closeEventDetail();
						}
					});
				}
			}
		});
	};

	const handleFilter = () => {
		uni.showActionSheet({
			itemList: ['全部农田', ...fieldOptions.value.map(f => f.name)],
			success: (res) => {
				console.log('选择了：', res.tapIndex);
			}
		});
	};

	// 加载数据
	const loadEvents = () => {
		uni.request({
			url: 'http://localhost:3000/events',
			success: (res) => {
				events.value = res.data;
			}
		});
	};

	const loadStaticData = () => {
		uni.request({
			url: 'http://localhost:3000/fields',
			success: (res) => {
				fields.value = res.data;
			}
		});

		uni.request({
			url: 'http://localhost:3000/statusText',
			success: (res) => {
				statusText.value = res.data;
			}
		});

		uni.request({
			url: 'http://localhost:3000/weekdays',
			success: (res) => {
				// 修改7：确保weekdays数据正确映射
				weekdays.value = res.data;
			}
		});

		uni.request({
			url: 'http://localhost:3000/eventTypes',
			success: (res) => {
				eventTypes.value = res.data;
			}
		});
	};

	onMounted(() => {
		loadStaticData();
		loadEvents();
	});
</script>

<style>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.nav-actions {
		display: flex;
		gap: 30rpx;
	}

	/* 视图切换样式 */
	.view-switch {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.switch-item {
		font-size: 16px;
		color: #666;
		padding: 10rpx 30rpx;
	}

	.switch-item.active {
		color: #4CAF50;
		font-weight: bold;
		border-bottom: 2px solid #4CAF50;
	}

	/* 日历容器样式 */
	.calendar-container {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.header-text {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.header-arrows {
		display: flex;
		gap: 30rpx;
	}

	/* 月视图样式 */
	.month-view {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10rpx;
	}

	.weekdays {
		display: flex;
		margin-bottom: 10rpx;
	}

	.weekday {
		flex: 1;
		text-align: center;
		font-size: 12px;
		color: #666;
		font-weight: 500;
		padding: 8rpx 0;
	}

	.days-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 4rpx;
	}

	.day-cell {
		width: calc((100% - 24rpx) / 7);
		aspect-ratio: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 8rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		background-color: #fafafa;
		border: 1rpx solid #f0f0f0;
	}

	.day-number {
		font-size: 13px;
		margin-bottom: 8rpx;
		font-weight: 500;
		color: #333;
		width: 100%;
		text-align: center;
	}

	.day-cell.current-day .day-number {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		display: inline-block;
		margin-bottom: 8rpx;
	}

	.day-cell.selected-day {
		background-color: #E8F5E9;
		border-color: #C8E6C9;
	}

	.day-cell.other-month .day-number {
		color: #bbb;
	}

	.event-markers {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4rpx;
		width: 100%;
		margin-bottom: 4rpx;
	}

	.marker {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.marker.type-fertilize {
		background-color: #FF9800;
	}

	.marker.type-water {
		background-color: #2196F3;
	}

	.marker.type-weed {
		background-color: #4CAF50;
	}

	.marker.type-pest {
		background-color: #F44336;
	}

	.marker.type-harvest {
		background-color: #9C27B0;
	}

	.event-count {
		font-size: 11px;
		color: #999;
		margin-top: auto;
	}

	/* 周视图样式 */
	.week-view {
		width: 100%;
	}

	.week-header {
		margin-bottom: 20rpx;
	}

	.week-range {
		font-size: 14px;
		color: #666;
	}

	.week-days {
		display: flex;
	}

	.week-day {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15rpx 0;
	}

	.week-day.selected-day {
		background-color: #E8F5E9;
		border-radius: 8rpx;
	}

	.week-day-name {
		font-size: 14px;
		color: #666;
		margin-bottom: 5rpx;
	}

	.week-day-date {
		font-size: 16px;
		margin-bottom: 5rpx;
	}

	/* 事件列表样式 */
	.events-container {
		flex: 1;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding: 20rpx;
	}

	.events-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.events-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.events-count {
		font-size: 14px;
		color: #666;
	}

	.events-list {
		max-height: 400rpx;
	}

	.event-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 15rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.event-time {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
		min-width: 80rpx;
	}

	.time-text {
		font-size: 12px;
		color: #666;
		margin-top: 5rpx;
	}

	.event-content {
		flex: 1;
	}

	.event-title {
		font-size: 15px;
		color: #333;
		margin-bottom: 5rpx;
		display: block;
	}

	.event-field {
		font-size: 13px;
		color: #666;
		display: block;
	}

	.event-status {
		font-size: 12px;
		padding: 5rpx 10rpx;
		border-radius: 4px;
	}

	.status-pending {
		background-color: #FFEB3B;
		color: #FF9800;
	}

	.status-completed {
		background-color: #E8F5E9;
		color: #4CAF50;
	}

	.status-overdue {
		background-color: #FFEBEE;
		color: #F44336;
	}

	/* 弹窗样式 */
	.event-detail {
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 30rpx;
	}

	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.detail-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.detail-content {
		margin-bottom: 40rpx;
	}

	.detail-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.detail-text {
		font-size: 15px;
		color: #333;
		margin-left: 15rpx;
		flex: 1;
	}

	/* 表单样式 */
	.edit-form {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.form-label {
		font-size: 14px;
		color: #666;
	}

	.form-input {
		padding: 12rpx 16rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		background-color: #f9f9f9;
		font-size: 14px;
	}

	.form-textarea {
		padding: 12rpx 16rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		background-color: #f9f9f9;
		font-size: 14px;
		height: 150rpx;
	}

	/* 操作按钮样式 */
	.detail-actions {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.action-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 14px;
		border-radius: 8rpx;
		margin: 0;
	}

	.complete-btn {
		background-color: #4CAF50;
		color: #fff;
	}

	.edit-btn {
		background-color: #2196F3;
		color: #fff;
	}

	.delete-btn {
		background-color: #F44336;
		color: #fff;
	}

	.cancel-btn {
		background-color: #9E9E9E;
		color: #fff;
	}

	.save-btn {
		background-color: #4CAF50;
		color: #fff;
	}
</style>